<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>05css텍스트</title>
		<style type="text/css">
			@font-face {
			  font-family: 'Nanum Myeongjo';
			  font-style: normal;
			  font-weight: 800;
			  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.eot);
			  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.eot?#iefix) format('embedded-opentype'),
			       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.woff2) format('woff2'),
			       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.woff) format('woff'),
			       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.ttf) format('truetype');
			}
			
			@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

			
			#t01 { font-family: 'Nanum Myeongjo';  }
			#t02 { font-family: 'Hanna', serif;  }
			#t03 { font-family: 'Nanum Brush Script', cursive; }
			#t04 { font-family: 'Nanum Gothic', sans-serif; }
			#t05 { font-family: 'Nanum Gothic Coding', monospace; }
			#t06 { font-family: 'Nanum Pen Script', cursive; }
			
			

		</style>
		
	</head>
	<body>
		<h1>05CSS 텍스트</h1>
		<h2>글자크기 : font-size</h2>
		<p style="font-size: 1em">이것은 100% 정도의 크기입니다</p>
		<p style="font-size: 1.5em">이것은 150% 정도의 크기입니다</p>
		
		<hr />
		<h2>글꼴 지정 : font-family</h2>
		<p style="font-family: 궁서체">궁서체로 지정해 봄</p>
		<p>font-face : 글꼴이 설치되어 있지 않으면 다운로드해서 설치함</p>
		<p id="t01">@font-face : 상업적 글꼴 제공시 사용<br />글꼴 서버에서 글꼴을 다운로드함</p>
		<p id="t02">한나</p>
		<p id="t03">나눔 브러쉬</p>
		<p id="t04">나눔 고딕</p>
		<p id="t05">나눔 고딕 코딩</p>
		<p id="t06">나눔 펜 스크립트</p>
		<p>웹 글꼴은 비영리로 구글에서 제공하고 잇음<br />
			<a href="http://google.com/fonts">http://google.com/fonts</a>
		</p>
		
		<hr />
		<h2>글꼴 모양, 굵기 : font-style, font-weight</h2>
		<p style="font-style: italic;">글꼴 모양은 normal, italic등이 있음</p>
		<p style="font-weight: bold;">글꼴 굵기는 bold등이 있음</p>
		
		<hr />
		<h2>글꼴 정렬하기 : text-align</h2>
		<p style="text-align: right;">오른쪽 정렬</p>
		<p style="text-align: left;">왼쪽 정렬</p>
		<p style="text-align: center;">가운데 정렬</p>
		
		<hr />
		<h2>줄 간격 지정하기 : line-height</h2>
		<p style="line-height: 0.5em;">
			1234567890가나다라마바사아자차카타파하<br />
			1234567890가나다라마바사아자차카타파하<br />
			1234567890가나다라마바사아자차카타파하<br />           
			1234567890가나다라마바사아자차카타파하<br />
			1234567890가나다라마바사아자차카타파하
		</p>
		
		<hr />
		<h2>글꼴 꾸미기 : text-decoration</h2>
		<p style="text-decoration: underline">글꼴 꾸미기 : 밑줄</p>
		<p style="text-decoration: overline">글꼴 꾸미기 : 윗줄</p>
		<p style="text-decoration: line-through">글꼴 꾸미기 : 취소선</p>
		<p style="text-decoration: blink">글꼴 꾸미기 : 깜박임</p>
		
		<hr />
		<h2>그림자효과 : text-shadow</h2>
		<p>text-shadow : 그림자시작x축 그림자시작y축 흐림정도 그림자색상</p>
		<p style="text-shadow: 3px 3px 5px gray; font-size: 2em; font-weight: bold;">그림자 속성</p>
		
	</body>
</html>
